<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Test</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>Insert title here</title>
    <style type="text/css">
        * html {
            background-image: url(about:blank);
            background-attachment: fixed;
        }

        .diyDialogWindow {
            background-color: #FFFFFF;
            width: 300px;
            height: 200px;
            border: 2px solid green;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -100px;
            _margin-left: 0px;
            _margin-top: 0px;
            _position: absolute;
            z-index: 2;
            _bottom: auto;
            _top: expression(eval(document.documentElement.scrollTop +(
		   document.documentElement.clientHeight-200)/2 ) );
            _left: expression(eval(document.documentElement.scrollLeft +(
		   document.documentElement.clientWidth-300)/2 ) );
        }

        .maskDiv {
            background-color: #ccc;
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            filter: alpha(opacity=10);
            opacity: 0.1;
            z-index: 1;
            _position: absolute;
            _width: expression(eval(document.documentElement.clientWidth) );
            _height: expression(eval(document.documentElement.clientHeight) );
            _top: expression(eval(document.documentElement.scrollTop) );
            _left: expression(eval(document.documentElement.scrollLeft) );
        }

        .titleH2 {
            margin: 0px;
            width: 100%;
            height: 25px;
            line-height: 25px;
            font-size: 14px;
            color: #FFFFFF;
            text-indent: 15px;
            cursor: move;
            overflow: hidden;
            background-color: #CCCCCC;
        }
    </style>
</head>
<body onselectstart="return false" onpaste="return false"
      oncopy="return false;" oncut="return false;"
      oncontextmenu="return false;">
1<br/>
2<br/>
3<br/>
4<br/>
5<br/>
6<br/>
7<br/>
8<br/>
9<br/>
10<br/>
11<br/>
12<br/>
13<br/>
14<br/>
15<br/>
16<br/>
17<br/>
18<br/>
19<br/>
20<br/>
21<br/>
22<br/>
23<br/>
24<br/>
25<br/>
26<br/>
27<br/>
28<br/>
29<br/>
30<br/>
31<br/>
32<br/>
33<br/>
34<br/>
35<br/>
36<br/>
37<br/>
38<br/>
39<br/>
40<br/>
41<br/>
42<br/>
43<br/>
44<br/>
45<br/>
46<br/>
47<br/>
48<br/>
49<br/>
50<br/>

<div id="maskDiv" class="maskDiv"></div>
<div id="mainDiv" class="diyDialogWindow">
    <h2 class="titleH2" id="titleH2">我是标题</h2>
</div>
<script type="text/javascript">


    var mouseStart = {};
    var divStart = {};
    var mainDiv = document.getElementById("mainDiv");
    var h2 = document.getElementById("titleH2");
    var offsetW = !-[1, ] ? 0 : 150;
    var offsetH = !-[1, ] ? 0 : 100;
    h2.onmousedown = function (ev) {
        var oEvent = ev || event;
        mouseStart.x = oEvent.clientX;
        mouseStart.y = oEvent.clientY;
        divStart.x = mainDiv.offsetLeft + offsetW;
        divStart.y = mainDiv.offsetTop + offsetH;

        if (h2.setCapture) {
            h2.onmousemove = doDrag3;
            h2.onmouseup = stopDrag3;
            h2.setCapture();
        } else {
            document.addEventListener("mousemove", doDrag3, true);
            document.addEventListener("mouseup", stopDrag3, true);
        }
    };
    function doDrag3(ev) {
        var oEvent = ev || event;
        var l = oEvent.clientX - mouseStart.x + divStart.x;
        var t = oEvent.clientY - mouseStart.y + divStart.y;
        if (l < offsetW + 15) {
            l = offsetW + 1;
        } else if (l > document.documentElement.clientWidth
                - mainDiv.offsetWidth + offsetW - 15) {
            l = document.documentElement.clientWidth - mainDiv.offsetWidth + offsetW - 1;
        }
        if (t < offsetH + 15) {
            t = offsetH + 1;
        } else if (t > document.documentElement.clientHeight
                - mainDiv.offsetHeight + offsetH - 15) {
            t = document.documentElement.clientHeight - mainDiv.offsetHeight + offsetH - 1;
        }
        mainDiv.style.left = l + "px";
        mainDiv.style.top = t + "px";
    }
    ;
    function stopDrag3() {
        if (h2.releaseCapture) {
            h2.onmousemove = null;
            h2.onmouseup = null;
            h2.releaseCapture();
        } else {
            document.removeEventListener("mousemove", doDrag3, true);
            document.removeEventListener("mouseup", stopDrag3, true);
        }
    }
    function judgeIE() {
        var isIE = !!window.ActiveXObject;
        var isIE6 = isIE && !window.XMLHttpRequest;
        var isIE8 = isIE && !!document.documentMode;
        var isIE7 = isIE && !isIE6 && !isIE8;
        if (isIE) {
            if (isIE6) {
                alert("ie6");
            } else if (isIE8) {
                alert("ie8");
            } else if (isIE7) {
                alert("ie7");
            }
        }
    }
    window.onscroll = function () {
        var d = document.documentElement;
        var mainDiv = document.getElementById("mainDiv");
        mainDiv.style.top = d.scrollTop + (d.clientHeight - 200) / 2;
        mainDiv.style.left = d.scrollLeft + (d.clientWidth - 300) / 2;
    }
</script>
</body>
</html>